import { motion } from 'framer-motion'
import { useState } from 'react'
import logo from '../assets/logo.svg'

function Header({ isDark }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <header className="fixed w-full z-50 backdrop-blur-lg bg-[var(--bg-primary)]/80 border-b border-gray-800">
      <nav className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
        <motion.div 
          className="relative"
          whileHover={{ scale: 1.05 }}
        >
          <img 
            src={logo} 
            alt="Cursor" 
            className="h-8"
            style={{ filter: isDark ? 'invert(1)' : 'none' }}
          />
        </motion.div>

        {/* 桌面导航 */}
        <div className="hidden md:flex items-center gap-8">
          <a href="#features" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Features</a>
          <a href="#testimonials" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Testimonials</a>
          <a href="#pricing" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Pricing</a>
          <a href="#blog" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Blog</a>
        </div>

        {/* 移动端菜单按钮 */}
        <button 
          className="md:hidden p-2"
          onClick={() => setIsOpen(!isOpen)}
        >
          <div className={`w-6 h-0.5 bg-current transition-all ${isOpen ? 'rotate-45 translate-y-0.5' : ''}`} />
          <div className={`w-6 h-0.5 bg-current my-1.5 transition-all ${isOpen ? 'opacity-0' : ''}`} />
          <div className={`w-6 h-0.5 bg-current transition-all ${isOpen ? '-rotate-45 -translate-y-1.5' : ''}`} />
        </button>

        {/* 移动端菜单 */}
        <div className={`
          md:hidden fixed top-[73px] left-0 w-full bg-[var(--bg-primary)] border-b border-gray-800
          transition-all duration-300 overflow-hidden
          ${isOpen ? 'max-h-60 opacity-100' : 'max-h-0 opacity-0'}
        `}>
          <div className="px-4 py-4 flex flex-col gap-4">
            <a href="#features" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Features</a>
            <a href="#testimonials" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Testimonials</a>
            <a href="#pricing" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Pricing</a>
            <a href="#blog" className="text-[var(--text-primary)] hover:text-blue-500 transition-colors">Blog</a>
          </div>
        </div>
      </nav>
    </header>
  )
}

export default Header 